<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>

<html xmlns:c="http://java.sun.com/jsp/jstl/core">
<head>
	<!-- CSS-Dateien verknÃ¼pfen -->
    <link type="text/css" rel="stylesheet" href="<c:url value="/resources/style/zeigeSerie.css"/>" />
<title><c:out value="${serienBean.titel}" /></title>
</head>

<body>
	<!-- Header mit Menüleiste -->
	<%@ include file="./header.jsp" %>
	
	<div class="text">
		<h1>${serienBean.titel}</h1>
		<div class="allg">
			<p> Direktor: ${serienBean.direktor}</p>
			<p> Erstausstrahlung: ${serienBean.jahr}</p>
			<p> Genre: ${serienBean.genre}</p>
			<p> Herkunftsland: ${serienBean.herkunftsland}</p>
			 <p>${serienBean.bewertungsAnzahl} Bewertungen: </p>
			 <p><img src="<c:url value="/resources/Media/${serienBean.bewertung}Sterne.png"/> " alt="${serienBean.bewertung}" /></p>
			 <%-- Wenn der User angemeldet ist ist eigene Bewertung möglich --%>
			 <c:if test="${userBean.userId != null && userBean.userId != 0}">
		 		<c:choose>
		 			<%-- Bewertung: -1 -> Der User hat noch keine Bewertung abgegeben --%>
		 			<%-- User hat bewertet: Seine eigene Bewertung anzeugen --%>
		 			<c:when test="${userBewertung != -1}">
		 				<p>Deine Bewertung:</p>
		 				<div id="sterneanzeige">
		 					<p><img src="<c:url value="/resources/Media/${userBewertung}.0Sterne.png"/> " alt="${serienBean.bewertung}" /> </p>
		 				</div>
		 			</c:when>
		 			<c:otherwise>
			 			<%-- Ansonsten darf er die Serie noch bewerten --%>
			 			<div id="zuBewerten">
			 				<p>Jetzt diese Serie bewerten:<br></p>
			 				<p>
			 					<img id="1" class="stern" src="<c:url value="/resources/Media/dunklerStern.png"/> " alt="1" />
			 					<img id="2" class="stern" src="<c:url value="/resources/Media/dunklerStern.png"/> " alt="2" /> 
			 					<img id="3" class="stern" src="<c:url value="/resources/Media/dunklerStern.png"/> " alt="3" /> 
			 					<img id="4" class="stern" src="<c:url value="/resources/Media/dunklerStern.png"/> " alt="4" /> 
			 					<img id="5" class="stern" src="<c:url value="/resources/Media/dunklerStern.png"/> " alt="5" /> 
			 				</p>
			 			</div>
		 			</c:otherwise>
		 		</c:choose>
		 	
		 		<%-- Wenn der User angemeldet ist, kann er die Serie zu seinen Favoriten hinzufügen --%>
		 		<%-- Ob die Serie favorisiert ist oder nicht ist im Parameter favorisiert angegeben --%>
		 		<div id="favorit" class="${favorit} favButton">
		 			<span></span> Favorisieren
		 		</div>
			 </c:if>
			 
			 <h3>Trailer:</h3>
			 <iframe src="http://${serienBean.trailerSource}" frameborder="0" allowfullscreen></iframe>
		 </div>
		 
		 <div class="beschreibung">
		 	<h3>Beschreibung</h3>
		 	<p>${serienBean.beschreibungHtml}<p/>
		 </div>
		 
	</div>
	
	<!-- Footer -->
	<%@ include file="./footer.jsp" %>
	
	<%-- Versteckte DOM-Elemente, um den Context-Path & SerienId in JavaScript zu Verfügung zu haben --%>
	<span id="contextPath" style="display:none;"><%=request.getContextPath()%></span>
	<span id="serienId" style="display:none;">${serienBean.serienId}</span>
	
	<!--  JQuery & JavaScript Scripte einbinden -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src=" <c:url value="/resources/script/standard.js"/> "></script>
    <script type="text/javascript" src=" <c:url value="/resources/script/zeigeSerie.js"/> "></script>
</body>
</html>